import React, {Component} from 'react';
import PropTypes from "prop-types";
import "./index.css";

class Item extends Component {
    static propTypes = {
        id: PropTypes.string.isRequired,
        onMouse: PropTypes.func.isRequired
    }
    // 定义状态
    state = {
        mouse: false
    }
    handleMouse = (isEnter) => {
        return () => {
            this.setState({mouse: isEnter})
            // this.props.onMouse(isEnter, this.props.id);
        }
    }
    handleChnage = (id) => {
        return (event) => {
            console.log(id,event.target.checked)
            this.props.updateTodo(this.props.id,event.target.checked);
        }
    }
    handleDelete = (id) => {
        // this.props.onDelete(this.props.id);
            console.log(id)
        if(window.confirm('确定删除吗？')){
            this.props.deleteTodo(id);
        }
    }
    render() {
        const {name, id, completed} = this.props;
        const {mouse} = this.state;
        return (
            <li style={{background: mouse ? '#ddd' : '#fff'}} onMouseEnter={this.handleMouse(true)}
                onMouseLeave={this.handleMouse(false)}>
                <label>
                    <input type="checkbox" checked={completed} onChange={this.handleChnage(id)}/>
                    <span>{name}</span>
                </label>
                <button className="btn btn-danger" style={{display:mouse ? 'inline-block': 'none'}} onClick={() => this.handleDelete(id)}>删除
                </button>
            </li>
        );
    }
}

export default Item;